<template>
	<view v-if="load">
		<view v-if="list.length > 0">
			<view class="order-top-line" ></view>
			<view class="order-card" v-for="(item,index) in list" :key="'list'+index" >
				<view :class="item.status != 3 ? 'order-card-title' : 'order-card-title order-grey'">{{item.bx_name}}</view>
				<view  class="order-card-no">保险单号：{{item.bd_no}}</view>
				<view class="order-card-center">
					<view class="order-card-center-item" >
						<view class="order-card-center-title">生效日期</view>
						<view :class="item.status != 3 ? 'order-card-center-time' : 'order-card-center-time order-grey'">{{item.start_time}}</view>
					</view>
					<view class="order-card-center-item" >
						<view class="order-card-center-title">结束日期</view>
						<view :class="item.status != 3 ? 'order-card-center-time' : 'order-card-center-time order-grey'">{{item.end_time}}</view>
					</view>
					
				</view>
				<view style="display: flex;align-items: center;">
					<view :class="item.status != 3 ? 'order-card-footer' : 'order-card-footer order-grey'" @tap="toDetail(item.id)" >查看详情</view>
					<view :class="item.status != 3 ? 'order-card-footer' : 'order-card-footer order-grey'" @tap="toChange(item)" >批改</view>
				</view>
				<view :class="item.status != 3 ? 'order-card-tag order-card-tag-green' : 'order-card-tag order-card-tag-grey'" >{{status[item.status]}}</view>
			</view>
		</view>
		<view v-else class="empty-box" >
			<image src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/h5/order1.png" mode="widthFix" class="empty-icon"></image>
			<view class="empty-txt" >还没有订单</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				list :[],
				page : 1,
				last_page :1,
				load : false,
				status:['','未生效','保障中','已失效']
			}
		},
		onLoad() {
			this.getData();
			this.userviewOrder()
			
		},
		onReachBottom() {
			if(this.page >= this.last_page)return this.toast('暂无更多数据');
			this.page ++;
			this.getData();
		},
		methods:{
			toDetail(id){
				uni.navigateTo({
					url:'/pages/order/detail?id='+id
				})
			},
			toChange(item){
				uni.navigateTo({
					url:'/pages/order/persion?id='+item.id+'&type='+item.type
				})
			},
			userviewOrder(){
				this.ajax('user/viewOrder',{
					data:{},
					success:()=>{
						this.getData()
					}
				})
			},
			getData(){
				this.ajax('user/orderList',{
					data:{
						page : this.page
					},
					success:(res) => {
						this.load = true;
						this.page = res.msg.current_page;
						this.last_page = res.msg.last_page;
						if(this.page == 1) {
							this.list = res.msg.data;
						} else {
							this.list = this.list.concat(res.msg.data);
						}
					}
				});
			}
		}
	}
</script>

<style>
	@import url("@/static/css/order/list.css");
</style>
